*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.obox{
	width: 100%;
	height: 100vh;
	border: solid 10px #efe6d5;
	background: #bfd3c8;
	overflow: hidden;
max-width: 414px;
    margin: 0 auto;
    position: relative;
}
.box1{
	width: 250px;
	position: absolute;
	top: 50%;
	margin-top: -104px;
	left: 50%;
	margin-left: -125px;
}
.box1 .img1{
	position: fixed;
	width: 200px;
	bottom: 30px;
	left: 50%;
	margin-left: -100px;
	
}
.box1-hd{
	width: 136px;
	height: 170px;
	background: url(../img/58.png) 0px 0px;
	margin: 0 auto;	
}
.box1.active .box1-hd{
	animation: mybox1hd 0.5s step-end infinite;
}
@keyframes mybox1hd{
	0%{background: url(../img/58.png) 0px 0px;}
	33%{background: url(../img/58.png) 0px -170px;}
	66%{background: url(../img/58.png) 0px -340px;}
	100%{background: url(../img/58.png) 0px 0px;}
}
.progressbox{
	position: relative;
	height: 38px;
	line-height: 34px;
	text-align: center;
}
.progressbox img{
	display: block;
	width: 100%;
}
.prs{
	width: 0px;
    height: 27px;
    background: #eb89a3;
    position: absolute;
    top: 3px;
    left: 4px;
    border-radius: 5px;
    transition: all 1s;
}
.box1.active .prs{
	animation: myprs 2s 1 forwards;
}
@keyframes myprs{
	from{width: 0;}
	to{width: 243px;}
}
.progressbox p{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	font-weight: 900;
}
.box2{
	position: relative;
	height: 100vh;
	display: none;
}
.box2-con{
	width: 320px;
	height: 100%;
	background: url(../img/62.png) no-repeat 0px 0px/100%;
	display: block;
	margin: 0 auto;
	position: relative;
}
.box2 .img1{
	position: absolute;
    width: 290px;
    top: 98px;
    left: 50%;
    margin-left: -145px;
    z-index: 10;
}
.box2 .hand-left{
	position: absolute;
	width: 100px;
	top: 196px;
    left: 5px;
    z-index: 3;
    transform-origin: top left;
    transform: rotate(0deg); 
}
.box2.active .hand-left{
	animation: handleft 0.5s linear alternate infinite;
}
@keyframes handleft{
	from{transform: rotate(0deg);}
	to{transform: rotate(5deg);}
}
.box2 .hand-right{
	position: absolute;
	width: 100px;
	top: 185px;
    right: 0px;
    z-index: 3;
    transform-origin:left 30px;
    transform: rotate(1deg);
}
.box2.active .hand-right{
	animation: handright 0.5s linear alternate infinite;
}
@keyframes handright{
	from{transform: rotate(1deg);}
	to{transform: rotate(-6deg);}
}
.xhz{
	position: absolute;
    top: 230px;
    left: 50%;
    width: 160px;
    margin-left: -80px;
    z-index: 2;
}
.xhz img{
	display: block;
	width: 100%;
}
.xhz .er1,.xhz .er2{
	position: absolute;
    top: 75px;
    left: 12px;
    width: 32px;
    height: 45px;
    transform: scale(1,1);
}
.box2.active .er1,.box2.active .er2{
	animation: myer 0.5s linear alternate infinite;
}
@keyframes myer{
	from{
		transform: scale(1,1);
	}
	to{
		transform: scale(1.5,0.8);
	}
}
.xhz .er2{
	left: 129px;
}
.xhz .img4{
	position: relative;
	top: -20px;	
}
.box2.active  .img4{
	animation: myimg4 1s linear alternate infinite;
}
@keyframes myimg4{
	0%{top: -20px;}
	50%{top: -25px;}
	100%{top: -20px;}
}
.ft{
	position: absolute;
	height: 50vh;
	background: #8faea6;
	left: 0px;
	top: 500px;
	width: 100%;
}
.ft img{
	display: block;
	margin: 50px auto 0px;
	width: 100px;
}
.box3{
	display: none;
	height: 100%;
	overflow: hidden;
	background: url(../img/5.png) 0px 0px/100% 100%;
}
.box3 .img1{
	width: 300px;
	display: block;
	margin: 50px auto;
}
.imglist{
	width: 300px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 auto;
}
.imglist img{
	width: 120px;
	margin-bottom: 20px;
}
.box4{
	display: none;
}
.box4>div{
	height: 100vh;
	max-width: 414px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.con1{
	background: url(../img/11.jpg) 0px 0px/100% 100%;
}
.bar1{
	width: 696px;
	height: 503px;
	padding: 0px 20px;
	margin: 270px auto 0px;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	transform: scale(0.5,0.5);
	transform-origin: top left;
}
.mom{
	width: 440px;
	height: 503px;
	background: url(../img/14.png) 0px 0px;
	
}
@keyframes mymom2{
	0%{background: url(../img/14.png) 0px -1509px;}
	50%{background: url(../img/14.png) 0px -2012px;}
	100%{background: url(../img/14.png) 0px -1509px;}
}
.chi{
	width: 256px;
	height: 343px;
	background: url(../img/16.png) 0px 0px;
	position: relative;
}
.txt{
	position: absolute;
    top: -85px;
    left: -140px;
    opacity: 0;
}
.box4.active .txt{
	animation: mytxt 2s linear forwards;
}
@keyframes mytxt{
	0%{opacity: 0;}
	25%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
.tc{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
}
.tc:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(0,0,0,0.6);
}
.tc-con{
	width: 300px;
	padding: 120px 0px 50px;
	position: absolute;
	top: 10%;
	left: 50%;
	margin-left: -150px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background: url(../img/27.png) no-repeat 0px 0px/100% 100%;
}
.tc-con li{
	width: 130px;
	height: 138px;
	list-style: none;
	text-align: center;
	font-size: 30px;
	color: #666;
	margin-bottom: 50px;
	position: relative;
	filter:brightness(1);
	order: 1;
	background: url(../img/28.png) no-repeat 0px -138px/100%;
}
.tc-con li:nth-child(2){
	order: 2;
	background: url(../img/29.png) no-repeat 0px -138px/100%;
}
.tc-con li:nth-child(3){
	order: 4;
	background: url(../img/30.png) no-repeat 0px -138px/100%;
}
.tc-con li:nth-child(4){
	order: 3;
	background: url(../img/31.png) no-repeat 0px -138px/100%;
}
.tc-con p{
	width: 100%;
	position: absolute;
	top: 95%;
}
.box5{
	width: 100%;
	height: 100vh;
	display: none;
	max-width: 414px;
	position: relative;
	z-index: 10;
	margin: 0 auto;
	background: url(../img/11.jpg) 0px 0px/100% 100%;
}
.box5 .active{
	display: block;
}
.rlsz{
	position: absolute;
	width: 320px;
	height: 300px;
	bottom: 150px;
	left: 50%;
	margin-left: -160px;
}
.rlsz1,.zhs{
	display: none;
}
.rlsz .mom{
	position: absolute;
	bottom: 20px;
	left: -30px;
	width: 207px;
	height: 236px;
	background: url(../img/144.png) 0px 0px;
	
}
.box5>div.active.rlsz1 .mom{
	animation: mom1 1s step-end forwards,mom2 0.3s 1s step-end infinite;
}
@keyframes mom1{
	0%{background: url(../img/144.png) 0px 0px;}
	25%{background: url(../img/144.png) 0px -236px;}
	50%{background: url(../img/144.png) 0px -473px;}
	70%{background: url(../img/144.png) 0px -710px;}
	100%{background: url(../img/144.png) 0px -946px;}
}
@keyframes mom2{
	0%{background: url(../img/144.png) 0px -710px;}
	50%{background: url(../img/144.png) 0px -946px;}
	100%{background: url(../img/144.png) 0px -710px;}
}
.rlsz .chi{
	position: absolute;
	bottom: 20px;
	right: 0px;
	width: 120px;
	height: 161px;
	background: url(../img/166.png) 0px 0px;
	
}
.box5>div.active .chi{
	animation: chi1 0.3s 1s step-end infinite;
}
@keyframes chi1{
	0%{bottom: 70px; background: url(../img/166.png) 0px 0px;}
	50%{bottom: 70px;background: url(../img/166.png) 0px -161px;}
	100%{bottom: 70px;background: url(../img/166.png) 0px -322px;}
}
.shenzhang {
	position: absolute;
	bottom: 95px;
	left: 130px;
	opacity: 0;
	
}
.box5>div.active .shenzhang{
	animation: shenzhang1 0.1s 1s forwards;
}
@keyframes shenzhang1{
	from{opacity: 0;}
	to{opacity: 1;}
}
.shenzhang img{
	width: 60px;
}
.shenzhang img:last-child{
	position: absolute;
	top: 0px;
	left: 20px;
	opacity: 0.7;
	
}
.box5>div.active .sz{
	animation: sz2 0.2s linear 1s infinite;
}
@keyframes sz2{
	from{opacity: 0.7;}
	to{opacity: 0.1;}
}
/*召唤术*/
.box5>div.active.zhs .mom{
	background: url(../img/355.png) 0px 0px;
	animation: zhsmom 1s step-end forwards;
}
@keyframes zhsmom{
	0%{background: url(../img/355.png) 0px 0px;}
	14%{background: url(../img/355.png) 0px -239px;}
	28%{background: url(../img/355.png) 0px -478px;}
	42%{background: url(../img/355.png) 0px -717px;}
	56%{background: url(../img/355.png) 0px -947px;}
	70%{background: url(../img/355.png) 0px -1184px;}
	84%{background: url(../img/355.png) 0px -1421px;}
	100%{background: url(../img/355.png) 0px -1658px;}
}
.txtbox1{
	width: 70px;
	height:50px;
	background: url(../img/53.png) 0px 0px/100%;
	position: absolute;
	bottom: 95px;
	left: 10px;
}
.txtbox2{
	width: 70px;
	height:50px;
	background: url(../img/53.png) 0px -56px/100%;
	position: absolute;
	bottom: 95px;
	left: 90px;
}
.txtbox3{
	width: 80px;
    height: 40px;
    background: url(../img/53.png) 0px -124px/100%;
    position: absolute;
    bottom: 40px;
    left: -8px;
}
.txtbox4{
	width: 80px;
    height: 40px;
    background: url(../img/53.png) 0px -164px/100%;
    position: absolute;
    bottom: 40px;
    left: 95px;
}
.txtbox1,.txtbox2,.txtbox3,.txtbox4{
	opacity: 0;
}
.box5>div.active .txtbox1{
	animation: txt1 0.25s 1s forwards;
}
.box5>div.active .txtbox2{
	animation: txt1 0.25s 1.25s forwards;
}
.box5>div.active .txtbox3{
	animation: txt1 0.25s 1.5s forwards;
}
.box5>div.active .txtbox4{
	animation: txt1 0.25s 1.75s forwards;
}
@keyframes txt1{
	from{opacity: 0;}
	to{opacity: 1;}
}
.lb{
	width: 180px;
	height: 200px;
	background: url(../img/36.png) 0px -400px;
	position: absolute;
	bottom: 20px;
	left: 0;
	opacity: 0;
}
.box5>div.active .lb{
	animation: lb1 0.5s 2s forwards,lb2 0.3s 2.5s step-end infinite ;
}
@keyframes lb1{
	0%{
		left: 0px;	
		opacity: 0;
	}
	100%{
		left: 90px;	
		opacity: 1;
	}
}
@keyframes lb2{
	0%{
		background: url(../img/36.png) 0px 0px;	
	}
	50%{
		background: url(../img/36.png) 0px -200px;		
	}
	100%{
		background: url(../img/36.png) 0px 0px;		
	}
}
.box5>div.active.zhs .chi{
	animation: chi1 0.3s 2.5s step-end infinite;
}
/*无影脚*/
.wyj .mom{
	width: 200px;
	height: 229px;
	left: 32px;
	bottom: 20px;
	background: url(../img/33.png) 0px 0px;	
}
.box5>div.active.wyj .mom{
	animation: wyjmom 1s 0s step-end,wyjmom2 0.5s 1s step-end infinite;
}
@keyframes wyjmom{
	20%{background: url(../img/33.png) 0px -0px;}
	40%{background: url(../img/33.png) 0px -460px;}
	60%{background: url(../img/33.png) 0px -690px;}
	80%{background: url(../img/33.png) 0px -916px;}
	100%{background: url(../img/33.png) 0px -1145px;}	
}
@keyframes wyjmom2{
	0%{background: url(../img/33.png) 0px -230px;}
	25%{background: url(../img/33.png) 0px -460px;}
	50%{background: url(../img/33.png) 0px -690px;}
	75%{background: url(../img/33.png) 0px -916px;}
	100%{background: url(../img/33.png) 0px -1145px;}	
}
.box5>div.active.wyj .chi{
	animation: chi1 0.3s 0.5s step-start infinite;
}
.wyj{
	display: none;
}
/*打狗棍*/
.dgg .mom{
	width: 200px;
	height: 229px;
	left: 0px;
	bottom: 20px;
	background: url(../img/34.png) 0px 0px;
	animation: wyjmom 1s 0s step-end,wyjmom2 0.5s 1s step-end infinite;
}
.box5>div.active.dgg .mom{
	animation: dggmom 1s 0s step-end,dggmom2 0.2s 1s step-end infinite;
}
@keyframes dggmom{
	0%{background: url(../img/34.png) 0px -0px;}
	20%{background: url(../img/34.png) 0px -230px;}
	40%{background: url(../img/34.png) 0px -460px;}
	60%{background: url(../img/34.png) 0px -690px;}
	80%{background: url(../img/34.png) 0px -916px;}
	100%{background: url(../img/34.png) 0px -1145px;}	
}
@keyframes dggmom2{
	0%{background: url(../img/34.png) 0px -916px;}
	50%{background: url(../img/34.png) 0px -1145px;}
	100%{background: url(../img/34.png) 0px -916px;}	
}
.box5>div.active.dgg .chi{
	animation: chi2 0.3s 1s step-start infinite;
}
@keyframes chi2{
	0%{bottom: 0px; background: url(../img/166.png) 0px 0px;}
	50%{bottom: 0px;background: url(../img/166.png) 0px -483px;}
	100%{bottom: 0px;background: url(../img/166.png) 0px -644px;}
}
.dgg{
	display: none;
}
.tc2{	
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.8);
	display: none;
}
.btnbox{
	position: absolute;
	width: 100%;
	bottom: 120px;
	left: 0px;
	display: flex;
	justify-content: center;
	display: none;
}
.btnbox img{
	width: 130px;
	margin: 0px 15px;
}
.box6{
	width: 100%;
	height: 100vh;
	max-width: 414px;
	margin: 0 auto;
	position: relative;
	display: none;
}
.box6 .img1{
	display: block;
	width: 100%;
	margin: 0 auto;
}
.box6 .img2,.box6 .img3,.box6 .img4,.box6 .img5,.box6 .img6,.box6 .img7{
	display: block;
	width: 80%;
	position: absolute;
	left: 10%;
	top: 150px;
}
.box6 .img3{
	width: 50%;
	left: 25%;
	top: 250px;
}
.box6 .img4{
	top: 350px;
}
.box6 .img5{
	width: 50%;
	left: 25%;
	top: 450px;
}
.box6 .img6{
	width: 40%;
	left: 30%;
	top: 540px;
}
.box6 .img7{
	width: 40%;
	left: 30%;
	top: 600px;
}
.music{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	z-index: 99;
}
/*.box1,.box2,.box3,.box4,.box6{
	display: none;
}
.box5{
	display: block;
}*/
.box7{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	max-width: 414px;
	z-index: 20;
}
.icon1{
	width: 168px;
	height: 142px;
	position: absolute;
	top: 150px;
	left: 50%;
	margin-left: -84px;
	background: url(../img/56.png);
	transform: scale(0.5,0.5);
}
.box7 .icon1.active{
	animation: myicon1 1s step-end 1.5s forwards;
}
@keyframes myicon1{
	from{background: url(../img/56.png);}
	to{background: url(../img/56.png) 0px -142px;}
}
.icon2{
	width: 56px;
    height: 49px;
    position: absolute;
    top: 67px;
    left: 286px;
    background: url(../img/57.png);
    transform: scale(0.7,0.7);
}
@keyframes myicon2{
	0%{background: url(../img/57.png) 0px 0px;}
	50%{background: url(../img/57.png) 0px -49px;}
	100%{background: url(../img/57.png) 0px -98px;}
}
.box7 .icon2.active{
	animation: myicon2 1s step-end 1.5s forwards;
}
.icon3{
	width: 342px;
    height: 103px;
    position: absolute;
    top: 235px;
    left: 50%;
    margin-left: -171px;
    background: url(../img/48.png) 0px -0px;
    transform: scale(0.5,0.5);
}
@keyframes myicon3{
	0%{background: url(../img/48.png) 0px -0px;}
	50%{background: url(../img/48.png) 0px -103px;}
	100%{background: url(../img/48.png) 0px -205px;}
}
.box7 .icon3.active{
	animation: myicon3 0.5s step-end 1.5s infinite;
}
.icon4{
	width: 200px;
    height: 290px;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -100px;
    background: url(../img/47.png) 0px -0px;
    transform: scale(0.5,0.5);
}
@keyframes myicon4{
	0%{background: url(../img/47.png) 0px -0px;}
	100%{background: url(../img/47.png) 0px -290px;}
}
.box7 .icon4.active{
	animation: myicon4 0.5s step-end 1.5s forwards;
}
.box7{
	display: none;
}
.box7>div{
	display: none;
}
.box7 .active{
	display: block;
}
